import React, { FC } from "react";
import useGetComponentinfo from "../../../hooks/useGetComponentinfo";
import { getComponentConByType } from "../../../components/QuestionComponents";
import { changeComponentProps } from "../../../store/componentReducer";
import { useDispatch } from "react-redux";

const NoProp: FC = () => {
  return <div style={{ textAlign: "center" }}>未选中组件</div>;
};

const ComponentProps: FC = () => {
  const dispath = useDispatch();
  const { selectComponent } = useGetComponentinfo();
  if (selectComponent == null) return <NoProp></NoProp>;
  const { type, props, isLock, isHidden } = selectComponent;
  const componentConf = getComponentConByType(type);
  if (componentConf == null) return <NoProp></NoProp>;
  function changeProps(newProps: ComponentPropsType) {
    if (selectComponent === null) return;
    const { fe_id } = selectComponent;

    dispath(changeComponentProps({ fe_id, newProps }));
  }

  const { PropComponent } = componentConf;

  return (
    <PropComponent {...props} onChange={changeProps} disabled={isLock || isHidden}></PropComponent>
  );
};
export default ComponentProps;
